<template>
  <out-line-d :width="574" :height="0" :position="position" :id="element.key" :padding="0" @closeLayer="closeLayer">
    <div class="info">
      <Title title="数据分析" />
      <div class="content">
        <!-- 数据分析选项 -->
        <div class="options">
          <div
            :class="['option-item', item.status ? 'active' : '']"
            v-for="item in options"
            :key="item.id"
            @click="chooseOption(item.type)"
          >
            {{ item.name }}
          </div>
        </div>
        <!-- 按钮功能 -->
        <div class="btns">
          <div class="btn reset" @click="reset">重置</div>
          <div class="btn confirm" @click="confirm">完成</div>
        </div>
        <!-- 图表功能区域 -->
        <div class="pies">
          <div class="pie-item" v-for="(item, index) in list" :key="index">
            <echart :option="item" />
          </div>
        </div>
      </div>
    </div>
  </out-line-d>
</template>
<script>
  import OutLineD from '@comp/gis/outlined'
  import Title from '@comp/gis/title'
  import {mapActions} from 'vuex'
  import {pieQuery} from '@/api/gis'
  import Echart from '@comp/gis/echart'

  export default {
  components: {
    OutLineD,
    Title,
    Echart,
  },
  props: {
    element: {
      type: Object,
      default: () => {},
    },
    position: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      options: {
        acTreatment: {
          id: 1,
          type: 'acTreatment',
          name: '涉活性炭吸附法处理',
          status: true,
        },
        carbonEmissions: {
          id: 2,
          type: 'carbonEmissions',
          name: '涉碳排放',
          status: true,
        },
        complaint: {
          id: 3,
          type: 'complaint',
          name: '涉投诉',
          status: true,
        },
        emCategory: {
          id: 4,
          type: 'emCategory',
          name: '环保管理类别',
          status: true,
        },
        emRisk: {
          id: 5,
          type: 'emRisk',
          name: '环境风险',
          status: true,
        },
        endangeredWaste: {
          id: 6,
          type: 'endangeredWaste',
          name: '涉危废',
          status: true,
        },
        exhaustGasSpecies: {
          id: 7,
          type: 'exhaustGasSpecies',
          name: '废气种类',
          status: true,
        },
        focusSoil: {
          id: 8,
          type: 'focusSoil',
          name: '涉土壤重点监管',
          status: true,
        },
        gas: {
          id: 9,
          type: 'gas',
          name: '涉气',
          status: true,
        },
        leasingCompanies: {
          id: 10,
          type: 'leasingCompanies',
          name: '租赁企业',
          status: true,
        },
        managementLevel: {
          id: 11,
          type: 'managementLevel',
          name: '排污许可证管理级别',
          status: true,
        },
        onlineMonitoring: {
          id: 12,
          type: 'onlineMonitoring',
          name: '涉在线监测',
          status: true,
        },
        prodStatus: {
          id: 13,
          type: 'prodStatus',
          name: '生产状况',
          status: true,
        },
        rainSewage: {
          id: 14,
          type: 'rainSewage',
          name: '雨污分流',
          status: true,
        },
        wade: {
          id: 15,
          type: 'wade',
          name: '涉水',
          status: true,
        },
        wasteActivatedCarbon: {
          id: 16,
          type: 'wasteActivatedCarbon',
          name: '涉废活性炭',
          status: true,
        },
        wasteWaterTypes: {
          id: 17,
          type: 'wasteWaterTypes',
          name: '废水种类',
          status: true,
        },
        withinGarden: {
          id: 18,
          type: 'withinGarden',
          name: '园中园企业',
          status: true,
        },
      },
      echartOption: {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          show: false,
        },
      },
      selectOptions: [],
      list: [],
    }
  },
  methods: {
    ...mapActions(['deleteDLayers']),
    //关闭图层
    closeLayer() {
      this.deleteDLayers(this.element.key)
    },
    //选择选项
    chooseOption(type) {
      this.options[type].status = !this.options[type].status
    },
    queryPies() {
      this.list = []
      let params = {
        parkId: this.element.data.id,
      }
      this.selectOptions.map((item) => {
        params[item] = 1
      })
      pieQuery(params).then((res) => {
        if (res.success) {
          const _data = res.result || {}
          const _echartsData = []
          Object.keys(_data).map((item) => {
            let echartData = _data[item].map((items) => {
              return {
                name: items.item,
                value: items.count,
              }
            })
            _echartsData.push(
              Object.assign({}, this.echartOption, {
                title: {
                  text: this.options[item].name,
                  left: 'left',
                  textStyle: {
                    color: '#00FFE9',
                    fontSize: 14,
                  },
                },
                series: [
                  {
                    type: 'pie',
                    radius: '50%',
                    label: {
                      //饼图图形上的文本标签
                      normal: {
                        show: true,
                        position: 'outside', //标签的位置
                        textStyle: {
                          fontWeight: 300,
                          fontSize: 12, //文字的字体大小
                          color: '#fff',
                        },
                        formatter: '{d}%',
                      },
                    },
                    data: echartData,
                    emphasis: {
                      itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                      },
                    },
                  },
                ],
              })
            )
          })
          this.list = _echartsData
        }
      })
    },
    //重置
    reset() {
      const _options = this._.cloneDeep(this.options);
      Object.keys(_options).map((item) => {
        _options[item].status = true
      })
      this.options = _options
      this.confirm()
    },
    //确定
    confirm() {
      let _selectOptions = []
      Object.keys(this.options).map((item) => {
        if (this.options[item].status) {
          _selectOptions.push(this.options[item].type)
        }
      })
      this.selectOptions = _selectOptions
      this.searchShow = false
      this.queryPies()
    },
  },
  mounted() {
    //初始化数据
    this.confirm()
  },
}
</script>
<style lang="less" scoped>
.info {
  width: 100%;
  height: auto;
  padding-top: 12px;
  .content {
    width: 100%;
    height: auto;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    .options {
      display: flex;
      flex-wrap: wrap;
      .option-item {
        width: 118px;
        height: 46px;
        background-image: url('../../../../../assets/gis/no-xuanzhong.png');
        background-size: 100%;
        background-repeat: no-repeat;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #bfbfbf;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 20px;
        margin: 0 10px 10px;
        cursor: pointer;
        text-align: center;
      }
      .active {
        background-image: url('../../../../../assets/gis/xuanzhong.png');
        color: #00ffe9;
      }
    }
    .btns {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 10px;
      border-bottom: 1px solid rgba(0, 255, 233, 0.15);
      padding-bottom: 30px;
      .btn {
        width: 72px;
        height: 26px;
        cursor: pointer;
        margin: 0 20px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        border-radius: 8px;
        line-height: 26px;
        text-align: center;
      }
      .reset {
        background: rgba(30, 111, 255, 0);
        border: 1px solid #eab77e;
        color: #eab77e;
      }
      .confirm {
        background: rgba(30, 111, 255, 0);
        border: 1px solid #00ffe9;
        color: #00ffe9;
      }
    }
    .pies {
      width: 100%;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      .pie-item {
        width: 50%;
        height: auto;
      }
    }
  }
  .content::-webkit-scrollbar {
    display: none;
  }
}
</style>